@borderColor: #a8bb9c;
@normalWidth: 35px;
@normalMargin: 2px;
@radius: 5px;
@txtW: 100px;
@txtH: 130px;
@duration: 5s;
.border {
  position: absolute;
  box-sizing: border-box;
  background: @borderColor;
  border-radius: @radius;
  animation-duration: @duration;
  animation-iteration-count: infinite;
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 30px 0;
  box-sizing: border-box;
}
.viewBox {
}
.g {
  position: relative;
  width: @txtW;
  height: @txtH;
  animation-name: g_animate;
  animation-duration: @duration;
  animation-iteration-count: infinite;
  .g_l1 {
    .border;
    animation-name: g1_animate;
  }
  .g_l2 {
    .border;
    animation-name: g2_animate;
  }
  .g_l3 {
    .border;
    animation-name: g3_animate;
  }
  .g_l4 {
    .border;
    animation-name: g4_animate;
  }
  .g_l5 {
    .border;
    animation-name: g5_animate;
  }
}

@keyframes g_animate {
  0% {
    transform: rotate(0deg);
  }
  17% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(-90deg);
  }
  47% {
    transform: rotate(-90deg);
  }
  50% {
    transform: rotate(0deg);
  }
  95% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes g1_animate {
  0% {
    width: @txtW - @normalWidth - @normalMargin;
    height: @normalWidth;
    top: 0;
    left: @normalWidth + @normalMargin;
    border-top-left-radius: @radius;
    border-top-right-radius: @radius * 3;
  }
  5% {
    width: @txtW - @normalWidth - @normalMargin;
    height: @normalWidth;
    top: 0;
    left: @normalWidth + @normalMargin;
    border-top-left-radius: @radius;
    border-top-right-radius: @radius * 3;
  }
  27% {
    width: @txtW - @normalWidth - @normalMargin;
    height: @normalWidth;
    top: 0;
    left: @normalWidth + @normalMargin;
    border-top-left-radius: @radius;
    border-top-right-radius: @radius * 3;
  }
  30% {
    width: @txtW - @normalWidth - @normalMargin;
    height: @normalWidth;
    top: @normalWidth * 0.5;
    left: @normalWidth + @normalMargin + @normalWidth;
    border-top-left-radius: @radius;
    border-top-right-radius: @radius * 3;
  }
  37% {
    width: @txtW - @normalWidth - @normalMargin;
    height: @normalWidth;
    top: @normalWidth * 0.5;
    left: @normalWidth + @normalMargin + @normalWidth;
    border-top-left-radius: @radius;
    border-top-right-radius: @radius * 3;
  }
  40% {
    width: @txtW;
    height: @normalWidth;
    top: 0;
    left: 0;
    border-top-left-radius: @radius;
    border-top-right-radius: @radius;
  }
  57% {
    width: @txtW;
    height: @normalWidth;
    top: 0;
    left: 0;
    border-top-left-radius: @radius;
    border-top-right-radius: @radius;
  }
  60% {
    width: @txtW - @normalWidth - @normalMargin;
    height: @normalWidth;
    top: 0;
    left: @normalWidth + @normalMargin;
    border-top-left-radius: @radius;
    border-top-right-radius: @radius * 3;
  }
  67% {
    width: @txtW - @normalWidth - @normalMargin;
    height: @normalWidth;
    top: 0;
    left: @normalWidth + @normalMargin;
    border-top-left-radius: @radius;
    border-top-right-radius: @radius * 3;
  }
  70% {
    width: @txtW - @normalWidth - @normalMargin;
    height: @normalWidth;
    top: @normalWidth * 0.5;
    left: @normalWidth + @normalMargin;
    border-top-left-radius: @radius;
    border-top-right-radius: @radius * 3;
  }
  77% {
    width: @txtW - @normalWidth - @normalMargin;
    height: @normalWidth;
    top: @normalWidth * 0.5;
    left: @normalWidth + @normalMargin;
    border-top-left-radius: @radius;
    border-top-right-radius: @radius * 3;
  }
  80% {
    width: @txtW - @normalWidth - @normalMargin;
    height: @normalWidth;
    top: 0;
    left: @normalWidth + @normalMargin;
    border-top-left-radius: @radius;
    border-top-right-radius: @radius * 3;
  }
  99% {
    width: @txtW - @normalWidth - @normalMargin;
    height: @normalWidth;
    top: 0;
    left: @normalWidth + @normalMargin;
    border-top-left-radius: @radius;
    border-top-right-radius: @radius * 3;
  }
  100% {
    width: @txtW - @normalWidth - @normalMargin;
    height: @normalWidth;
    top: 0;
    left: @normalWidth + @normalMargin;
    border-top-left-radius: @radius;
    border-top-right-radius: @radius * 3;
  }
}

@keyframes g2_animate {
  0% {
    width: @normalWidth;
    height: @txtH;
    top: 0;
    left: 0;
    border-top-left-radius: @radius;
    border-bottom-left-radius: @radius * 3;
    border-top-left-radius: @radius * 3;
  }
  27% {
    width: @normalWidth;
    height: @txtH;
    top: 0;
    left: 0;
    border-top-left-radius: @radius;
    border-bottom-left-radius: @radius * 3;
    border-top-left-radius: @radius * 3;
  }
  30% {
    width: 0;
    height: @txtH;
    top: 0;
    left: 0;
    border-top-left-radius: @radius;
    border-bottom-left-radius: @radius * 3;
    border-top-left-radius: @radius * 3;
  }
  67% {
    width: 0;
    height: @txtH;
    top: 0;
    left: 0;
    border-top-left-radius: @radius;
    border-bottom-left-radius: @radius * 3;
    border-top-left-radius: @radius * 3;
  }
  70% {
    width: @normalWidth;
    height: @txtH;
    top: 0;
    left: 0;
    border-top-left-radius: @radius;
    border-bottom-left-radius: @radius * 3;
    border-top-left-radius: @radius * 3;
  }

  99% {
    width: @normalWidth;
    height: @txtH;
    top: 0;
    left: 0;
    border-top-left-radius: @radius;
    border-bottom-left-radius: @radius * 3;
    border-top-left-radius: @radius * 3;
  }
  100% {
    width: @normalWidth;
    height: @txtH;
    top: 0;
    left: 0;
    border-top-left-radius: @radius;
    border-bottom-left-radius: @radius * 3;
    border-top-left-radius: @radius * 3;
  }
}

@keyframes g3_animate {
  0% {
    width: @txtW - @normalMargin - @normalWidth;
    height: @normalWidth;
    top: @txtH - @normalWidth;
    left: @normalMargin + @normalWidth;
    border-bottom-right-radius: @radius * 3;
  }
  27% {
    width: @txtW - @normalMargin - @normalWidth;
    height: @normalWidth;
    top: @txtH - @normalWidth;
    left: @normalMargin + @normalWidth;
    border-bottom-right-radius: @radius * 3;
  }
  30% {
    width: @txtW - @normalMargin - @normalWidth;
    height: @normalWidth;
    top: @txtH - @normalWidth - @normalWidth * 0.5;
    left: @normalMargin + @normalWidth + @normalWidth;
    border-bottom-right-radius: @radius * 3;
  }
  37% {
    width: @txtW - @normalMargin - @normalWidth;
    height: @normalWidth;
    top: @txtH - @normalWidth - @normalWidth * 0.5;
    left: @normalMargin + @normalWidth + @normalWidth;
    border-bottom-right-radius: @radius * 3;
  }
  40% {
    width: @txtW;
    height: @normalWidth;
    top: @txtH - @normalWidth;
    left: 0;
    border-bottom-right-radius: @radius;
  }
  57% {
    width: @txtW;
    height: @normalWidth;
    top: @txtH - @normalWidth;
    left: 0;
    border-bottom-right-radius: @radius;
  }
  60% {
    width: @txtW - @normalMargin - @normalWidth;
    height: @normalWidth;
    top: @txtH - @normalWidth;
    left: @normalMargin + @normalWidth;
    border-bottom-right-radius: @radius * 3;
  }
  67% {
    width: @txtW - @normalMargin - @normalWidth;
    height: @normalWidth;
    top: @txtH - @normalWidth;
    left: @normalMargin + @normalWidth;
    border-bottom-right-radius: @radius * 3;
  }
  70% {
    width: @txtW - @normalMargin - @normalWidth;
    height: @normalWidth;
    top: @txtH - @normalWidth * 1.5;
    left: @normalMargin + @normalWidth;
    border-bottom-right-radius: @radius * 3;
  }
  77% {
    width: @txtW - @normalMargin - @normalWidth;
    height: @normalWidth;
    top: @txtH - @normalWidth * 1.5;
    left: @normalMargin + @normalWidth;
    border-bottom-right-radius: @radius * 3;
  }
  80% {
    width: @txtW - @normalMargin - @normalWidth;
    height: @normalWidth;
    top: @txtH - @normalWidth;
    left: @normalMargin + @normalWidth;
    border-bottom-right-radius: @radius * 3;
  }
  99% {
    width: @txtW - @normalMargin - @normalWidth;
    height: @normalWidth;
    top: @txtH - @normalWidth;
    left: @normalMargin + @normalWidth;
    border-bottom-right-radius: @radius * 3;
  }
  100% {
    width: @txtW - @normalMargin - @normalWidth;
    height: @normalWidth;
    top: @txtH - @normalWidth;
    left: @normalMargin + @normalWidth;
    border-bottom-right-radius: @radius * 3;
  }
}
@keyframes g4_animate {
  0% {
    width: @normalWidth;
    height: @txtH - @normalWidth * 2 - 15px - @normalMargin;
    top: @normalWidth + 15px;
    left: @txtW - @normalWidth;
    border-top-right-radius: @radius * 3;
  }
  7% {
    width: @normalWidth;
    height: @txtH - @normalWidth * 2 - 15px - @normalMargin;
    top: @normalWidth + 15px;
    left: @txtW - @normalWidth;
    border-top-right-radius: @radius * 3;
  }
  10% {
    width: @txtW - @normalWidth - @normalMargin;
    height: @txtH - @normalWidth * 2 - @normalMargin * 2;
    top: @normalWidth + @normalMargin;
    left: @normalWidth + @normalMargin;
    border-top-right-radius: @radius;
  }
  27% {
    width: @txtW - @normalWidth - @normalMargin;
    height: @txtH - @normalWidth * 2 - @normalMargin * 2;
    top: @normalWidth + @normalMargin;
    left: @normalWidth + @normalMargin;
    border-top-right-radius: @radius;
  }
  30% {
    width: @txtW - @normalWidth;
    height: @normalWidth;
    top: @txtH / 2 - @normalWidth / 2;
    left: 0;
    border-top-right-radius: @radius;
  }
  57% {
    width: @txtW - @normalWidth;
    height: @normalWidth;
    top: @txtH / 2 - @normalWidth / 2;
    left: 0;
    border-top-right-radius: @radius;
  }
  60% {
    width: 0;
    height: @normalWidth;
    top: @txtH / 2 - @normalWidth / 2;
    left: @normalWidth * 2;
    border-top-right-radius: @radius;
  }
  87% {
    width: 0;
    height: @normalWidth;
    top: @txtH / 2 - @normalWidth / 2;
    left: @normalWidth * 2;
    border-top-right-radius: @radius;
  }
  90% {
    width: @normalWidth;
    height: @txtH - @normalWidth * 2 - 15px - @normalMargin;
    top: @normalWidth + 15px;
    left: @txtW - @normalWidth;
    border-top-right-radius: @radius * 3;
  }

  99% {
    width: @normalWidth;
    height: @txtH - @normalWidth * 2 - 15px - @normalMargin;
    top: @normalWidth + 15px;
    left: @txtW - @normalWidth;
    border-top-right-radius: @radius * 3;
  }
  100% {
    width: @normalWidth;
    height: @txtH - @normalWidth * 2 - 15px - @normalMargin;
    top: @normalWidth + 15px;
    left: @txtW - @normalWidth;
    border-top-right-radius: @radius * 3;
  }
}
@keyframes g5_animate {
  0% {
    width: @normalWidth;
    height: @normalWidth;
    top: @normalWidth + 15px;
    left: @txtW - @normalWidth - @normalWidth * 0.5 - @normalMargin;
  }
  17% {
    width: @normalWidth;
    height: @normalWidth;
    top: @normalWidth + 15px;
    left: @txtW - @normalWidth - @normalWidth * 0.5 - @normalMargin;
  }
  20% {
    width: 0;
    height: @normalWidth;
    top: @normalWidth + 15px;
    left: @txtW - @normalWidth;
  }
  87% {
    width: 0;
    height: @normalWidth;
    top: @normalWidth + 15px;
    left: @txtW - @normalWidth;
  }
  90% {
    width: @normalWidth;
    height: @normalWidth;
    top: @normalWidth + 15px;
    left: @txtW - @normalWidth - @normalWidth * 0.5 - @normalMargin;
  }
  99% {
    width: @normalWidth;
    height: @normalWidth;
    top: @normalWidth + 15px;
    left: @txtW - @normalWidth - @normalWidth * 0.5 - @normalMargin;
  }
  100% {
    width: @normalWidth;
    height: @normalWidth;
    top: @normalWidth + 15px;
    left: @txtW - @normalWidth - @normalWidth * 0.5 - @normalMargin;
  }
}
